<template>
  <div class="InvoicingManagementPage">
    <div class="head-box d-flex a-center">
      <div class="project-name">项目名:{{projectName}}</div>
      <el-button class="button_edit" @click="addInvoiceBtn">申请开票</el-button>
    </div>
    <div class="content-box d-flex flex-wrap">
        <el-descriptions
            v-if="invoiceList.length!==0"
           class="card-box"
          :column="1"
           :title="`状态：${['','待开','作废中','红冲中','已开','已开且红冲','作废'][item.status]}`"
          v-for="(item,index) in invoiceList" :key="index"
          border
        >
          <template #extra>
            <el-button
                @click="showInvoiceInfo(item)"
                class="button_edit"
                link
            >开票信息</el-button>
          </template>
          <el-descriptions-item label="类型：">
            <span>{{['','专票','普票'][item.type] || '暂无'}}</span>
          </el-descriptions-item>
          <template v-if="item.status === 3">
            <el-descriptions-item label="已开金额:">
              <span>{{item.invoicingAmount}}</span>
            </el-descriptions-item>
<!--            <el-descriptions-item label="红冲" v-if="item.hongChongAmountlist!==0">
              <span>{{item.hongChongAmountlist[0]}}</span>
            </el-descriptions-item>-->
          </template>
          <template v-if="item.status===5">
            <el-descriptions-item label="开票金额:">
              <span>{{item.invoicingAmount}}</span>
            </el-descriptions-item>
<!--            <el-descriptions-item label="红冲" v-if="item.hongChongAmountlist!==0">
              <span>{{item.hongChongAmountlist[0]}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="再红冲" v-if="item.hongChongAmountlist>1">
              <span>{{item.hongChongAmountlist[1]}}</span>
            </el-descriptions-item>-->
          </template>
          <el-descriptions-item label="金额：" v-if="item.status!==3">
            <span>{{item.amount}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="时间：">
            <span>{{item.startTime+'-'+item.endTime}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="财务开票人：">
            <span>{{item.financialUserName || '暂无'}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="开票请求人：">
            <span>{{item.createUserName || '暂无'}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="开票请求时间：">
            <span>{{item.createTime || '暂无'}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="操作：">
            <el-button
                @click="updateInvoiceBtn(item)"
                v-if="item.status===1"
                class="button_edit"
                link
            >修改</el-button>
            <el-button
                @click="cancelCancelInvoiceBtn(item)"
                v-if="item.status===2"
                class="button_cancel2"
                link
            >取消</el-button>
<!--            <template v-if="item.status === 3">
              <el-button
                  @click="hongChongCauseBtn(item)"
                  style="color: rgb(28 125 224)"
                  link
              >红冲原因</el-button>
              <el-button
                  @click="cancelHongChongBtn(item)"
                  style="color: rgb(28 125 224)"
                  link
              >取消红冲</el-button>
            </template>
            <template v-if="item.status === 4">
              <el-button
                  @click="hongChongBtn(item)"
                  style="color: rgb(28 125 224)"
                  link>红冲</el-button>
              <el-button
                  style="color: rgb(28 125 224)"
                  @click="cancelInvoiceBtn(item)"
                  link
              >作废</el-button>
            </template>
            <template v-if="item.status === 5">
              <el-button
                  @click="hongChongBtn(item)"
                  style="color: rgb(28 125 224)"
                  link
              >再红冲</el-button>
              <el-button
                  style="color: rgb(28 125 224)"
                  @click="cancelInvoiceBtn(item)"
                  link
              >作废</el-button>
            </template>-->
            <el-button
                @click="cancellationReasonBtn(item)"
                v-if="item.status === 6"
                class="button_delete2"
                link
            >作废原因</el-button>
          </el-descriptions-item>
        </el-descriptions>
        <el-empty v-else description="暂无数据" />
    </div>
    <div v-if="invoiceList.length!==0" class="pagination-wrap d-flex j-end">
      <el-pagination
          class="el-pagination"
          background
          layout="prev, pager, next"
          :page-size="8"
          :total="total"
          @current-change="currentChange"
      />
    </div>
    <el-divider/>
    <el-descriptions
        class="margin-top"
        title="当前开票信息："
        :column="3"
        border
    >
      <template #extra>
        <el-button type="primary" @click="updateInvoicing" class="button_edit">修改</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            名称：
          </div>
        </template>
        {{InvoicingInfo.invoiceHeader || "暂无"}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            地址：
          </div>
        </template>
        {{InvoicingInfo.invoiceAddress || "暂无"}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            税号：
          </div>
        </template>
        {{InvoicingInfo.dutyParagraph || "暂无"}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            电话：
          </div>
        </template>
        {{InvoicingInfo.invoicePhone || "暂无"}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            开户银行：
          </div>
        </template>
        {{InvoicingInfo.openingBank || "暂无"}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            银行账户：
          </div>
        </template>
        {{InvoicingInfo.bankAccount || "暂无"}}
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <!-- 修改开票信息 -->
  <add-invoicing-dialog
      v-model:visible="visible"
      :form="InvoicingInfo"
      @onConfirm="onConfirm"
  />

  <!-- 新增/修改开票信息 -->
  <add-invoice-dialog
   v-model:visible="visibleInvoice"
   :title="invoiceTitle"
   :form="InvoicingInfo"
   @onConfirm="onInvoiceConfirm"
  />

  <!-- 展示发票信息弹窗 -->
  <InvoiceInfoDialog
      v-model:visible="visibleInvoiceInfo"
      :form="InvoiceForm"
  />

  <cancel-invoice-dialog
      v-model:visible="visibleCancelInvoice"
      :form="InvoiceForm"
      @onConfirm="onInvoiceConfirm"
  />

  <hong-chong-dialog
      v-model:visible="visibleHongChong"
      :form="InvoiceForm"
      @onConfirm="onInvoiceConfirm"
  />
</template>

<script setup>
import {onMounted,ref} from "vue";
import {useRouter} from "vue-router";
import {leaseApi,invoiceApi} from "@/api/lease";
import {ElPagination,ElDivider,ElDescriptions,ElDescriptionsItem,ElMessage, ElMessageBox,ElEmpty} from "element-plus";
import AddInvoicingDialog from "./components/addInvoicingDialog";
import AddInvoiceDialog from "./components/addInvoiceDialog";
import InvoiceInfoDialog from "./components/InvoiceInfoDialog";
import CancelInvoiceDialog from "./components/cancelInvoiceDialog";
import HongChongDialog from "./components/hongChongDialog";

const router = useRouter();
const contractId = router.currentRoute.value.params.contractId;
const projectName = router.currentRoute.value.params.projectName;

const InvoicingInfo = ref({});
// 查询开票信息
const getInvoicingInfo = () => {
  leaseApi.getInvoicingInfo({
    contractId:contractId
  }).then(res=>{
    InvoicingInfo.value = res.data;
  });
}

const invoiceList = ref([]);
const total = ref(0);
// 查询发票列表
const getInvoiceList = (params) => {
  leaseApi.getInvoiceList(params).then(res=>{
    invoiceList.value = res.data.content;
    total.value = res.data.totalSize;
  });
}

const currentChange = (e) => {
  getInvoiceList({
    pageNum:e,
    pageSize:8,
    param:contractId
  });
}

const visible = ref(false);

// 修改开票按钮
const updateInvoicing = () => {
  visible.value = true;
}

// 弹窗的确认事件
const onConfirm = () => {
  getInvoicingInfo();
}

const visibleInvoice = ref(false);
const invoiceTitle = ref('');
// 重新开票
const addInvoiceBtn = () => {
  invoiceTitle.value = '申请开票';
  visibleInvoice.value = true;
}

// 新增开票
const onInvoiceConfirm = () => {
  getInvoiceList({
    pageNum:1,
    pageSize:8,
    param:contractId
  });
}

// 开票信息
const visibleInvoiceInfo = ref(false);
const InvoiceForm = ref({});
const showInvoiceInfo = (item) => {
  visibleInvoiceInfo.value = true;
  InvoiceForm.value = item;
}

// 修改发票
const updateInvoiceBtn = (item) => {
  invoiceTitle.value = '修改发票';
  InvoicingInfo.value = {
    ...item,
    timeArr:[item.startTime,item.endTime],
    businessId:contractId
  }
  visibleInvoice.value = true;
}

// 作废
const visibleCancelInvoice = ref(false);
const cancelInvoiceBtn = (item) => {
  visibleCancelInvoice.value = true;
  InvoiceForm.value = item;
}

// 红冲
const visibleHongChong = ref(false);
const hongChongBtn = (item) => {
  visibleHongChong.value = true;
  InvoiceForm.value = Object.assign({},item);
}

// 取消红冲
const cancelHongChongBtn = (item) => {
  ElMessageBox.alert('确认取消红冲吗?', '提示', {
    confirmButtonText: 'OK',
    callback: (action) => {
      if(action==='confirm'){
        invoiceApi.cancelHongChong(item.invoiceId).then(res=>{
          if(res.code == 200){
            getInvoiceList({
              pageNum:1,
              pageSize:8,
              param:contractId
            });
            ElMessage({
              type: 'success',
              message: `取消成功!`,
            });
          }
        });
      }
    },
  })
}

// 红冲原因
const hongChongCauseBtn = (item) => {
  ElMessageBox.alert(`${item.hongChongReason}`, '红冲原因', {
    confirmButtonText: 'OK',
    callback: (action) => {

    },
  })
}

// 作废原因
const cancellationReasonBtn = (item) => {
  ElMessageBox.alert(`${item.reasonForCancellation}`, '作废原因', {
    confirmButtonText: 'OK',
    callback: (action) => {

    },
  })
}

// 取消发票作废
const cancelCancelInvoiceBtn = (item) => {
  ElMessageBox.alert('确认取消发票作废吗?', '提示', {
    confirmButtonText: 'OK',
    callback: (action) => {
      if(action==='confirm'){
        invoiceApi.cancelCancelInvoice(item.invoiceId).then(res=>{
          if(res.code == 200){
            getInvoiceList({
              pageNum:1,
              pageSize:8,
              param:contractId
            });
            ElMessage({
              type: 'success',
              message: `取消成功!`,
            });
          }
        });
      }
    },
  })
}

onMounted(()=>{
  getInvoicingInfo();
  getInvoiceList({
    pageNum:1,
    pageSize:8,
    param:contractId
  });
});
</script>

<style lang="scss" scoped>
.InvoicingManagementPage{
  width: 100%;
  .head-box{
    width: 100%;
    .project-name{
      font-size: 18px;
      font-weight: 600;
    }
    .button{
      margin-left: 50px;
    }
  }
  .content-box{
    margin-top: 20px;
    .card-box:last-child{
      margin-right: 0!important;
    }
    .card-box{
      width: 24%;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }

  .pagination-wrap{
    margin-top: 10px;
    .el-pagination{
      margin-right: 56px;
    }
  }
}
</style>
